
<template>
  <div class="theme-switch">
    <el-switch
      v-model="isDarkTheme"
      active-color="#909399"
      inactive-color="#909399"
      :active-icon-class="'el-icon-moon'"
      :inactive-icon-class="'el-icon-sunny'"
      @change="handleThemeChange">
    </el-switch>
  </div>
</template>

<script>

export default {
  name: 'ThemeSwitch',
  data() {
    return {
      isDarkTheme: localStorage.getItem('theme') === 'dark'
    }
  },
  created() {
    this.initTheme()
  },
  methods: {
    initTheme() {
      const theme = localStorage.getItem('theme') || 'light'
      document.documentElement.setAttribute('data-theme', theme)
      this.isDarkTheme = theme === 'dark'
    },
    handleThemeChange(value) {
      const theme = value ? 'dark' : 'light'
      document.documentElement.setAttribute('data-theme', theme)
      localStorage.setItem('theme', theme)
    }
  }
}
</script>

<style lang="scss" scoped>
.theme-switch {
  display: inline-block;
  margin: 0 10px;

  ::v-deep .el-switch__core {
    // background-color: var(--menu-bg) !important;
    border-color: var(--border-color) !important;
  }
}
</style>
